<template>
  
  <div class="container">


    <div  @click="cutmoduleClick" class="cutmodule">
      <div ref="aHtml" data-a="1" :class="isDivActive?'divActive':''">{{ $t("permissionsIndex.UserTit") }}</div>
      <div data-a="2" :class="!isDivActive?'divActive':''">{{ $t("permissionsIndex.roleTitle") }}</div>
    </div>
    <!-- {{cutPageIndex}}
    {{selectedDepart}} -->
    <UserList style="margin-top: 20px;" v-if="isDivActive" />
    <RoleList v-if="!isDivActive" />
  </div>
</template>

<script>
import {
  mapState,
} from 'vuex'

import UserList from './components/UserList'
import RoleList from './components/RoleList'

export default {
  components: {
    RoleList,
    UserList,
  },

  computed: {
    ...mapState('depart', [
      'selectedDepart',
    ]),

  },
  data () {
    return {
      isDivActive: true,
    }
  },
  created () {

  },
  mounted () {

  },
  methods: {
    cutmoduleClick (e) {
      // console.log(111)
      // console.log(e.target.dataset.a)
      if (e.target.dataset.a == 1) {
        this.isDivActive = true
      } else if (e.target.dataset.a == 2) {
        // this.$Message.warning({
        //   content: '此功能暂未开放',
        //   duration: 5,
        // })
        // return
        this.isDivActive = false
      }
    },
  },
}
</script>

<style lang="less" scoped>
.container {
  .clearfix();
}
.divActive{
  color: #2d8cf0;
}
.cutmodule .divActive::after{
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 2px;
  background: #2d8cf0;
}
.cutmodule{
  width: 100%;
  line-height: 40px;
  background: #fff;
}
.cutmodule div{
  display: inline-block;
  padding: 0 14px;
  text-align: center;
  font-size: 15px;
  position: relative;
  cursor: pointer;
  font-weight: 600;
}
</style>
